<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'

const state = reactive({
	applytime: '2023-12-19 16:55:45',
	applyPeple: 'Tom',
	payee: 'Jeck',
	bank: '招商银行',
	account: '68855511244512154',
	transferPeple: 'Lusc',
	transferTime: '2023-12-19 16:55:45',
	proof: ''
})

const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean,  
}>(), { 
	id: 0,
	status: 1
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}


</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" title="转账详情" @close="closeDialog" style="width: 1000px;" center>
            <section>
				<section class="refund-item mb20">
					<span>申请时间：</span><span>{{ state.applytime }}</span>
				</section>

				<section class="refund-item mb20">
					<span>申请人：</span><span>{{ state.applyPeple }}</span>
				</section>

				<section class="refund-item mb20">
					<span>收款人：</span><span>{{ state.payee }}</span>
				</section>

				<section class="refund-item mb20">
					<span>开户行：</span><span>{{ state.bank }}</span>
				</section>

				<section class="refund-item mb20">
					<span>账号：</span><span>{{ state.account }}</span>
				</section>

				<section class="refund-item mb20">
					<span>转账人员：</span><span>{{ state.transferPeple }}</span>
				</section>
				<section class="refund-item mb20">
					<span>转账时间：</span><span>{{ state.transferTime }}</span>
				</section>
				<section class="refund-item mb20">
					<span>转账凭证：</span>
					<el-image :src="state.proof" fit="cover"> 
						<template #error>
						<div class="image-slot">
							<svg t="1702890633840" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3767" width="64" height="64"><path d="M202.816 938.666667H160A74.666667 74.666667 0 0 1 85.333333 864v-704A74.666667 74.666667 0 0 1 160 85.333333h704A74.666667 74.666667 0 0 1 938.666667 160v704a74.666667 74.666667 0 0 1-70.570667 74.56L864 938.666667H202.816zM864 149.333333h-704a10.666667 10.666667 0 0 0-10.666667 10.666667v704a10.666667 10.666667 0 0 0 10.666667 10.666667h56.810667c1.770667-2.24 3.690667-4.394667 5.76-6.464l407.296-407.296a74.666667 74.666667 0 0 1 105.6 0L874.666667 600.106667V160a10.666667 10.666667 0 0 0-10.666667-10.666667z m-188.885333 356.821334L306.602667 874.666667H864a10.666667 10.666667 0 0 0 10.666667-10.666667v-173.397333l-184.448-184.448a10.666667 10.666667 0 0 0-15.104 0zM384 256a128 128 0 1 1 0 256 128 128 0 0 1 0-256z m0 64a64 64 0 1 0 0 128 64 64 0 0 0 0-128z" fill="#dbdbdb" p-id="3768"></path></svg>
						</div>
						</template>
					</el-image>
				</section>
			</section>
		</el-dialog>
		
    </main>
</template>

<style lang='scss' scoped>
.refund-item{
	display: flex;
	align-items: center;
	span{
		&:first-child {
			width: 90px;
			color: #888;
		}
	}
	
}
</style>